var smallBox = document.querySelector('.fabb') /*  <!-- 左侧的小盒子 --> */
var shade = document.querySelector('.shade')
var bigBox = document.querySelector('.fdj-2')
var bigImg = document.querySelector('.fdj-2 img ')
smallBox.onmouseover = function() {
    shade.style.display = 'block'
    bigBox.style.display = 'block'
}
smallBox.onmouseout = function() {
        shade.style.display = 'none'
        bigBox.style.display = 'none'
    }
    /* 
        第二步
            - 获取遮罩层的移动位置
     */
smallBox.onmousemove = function(e) {
    var e = e || window.event
        // 获取鼠标的位置

    const rect = event.currentTarget.getBoundingClientRect()
    var x = event.clientX - rect.left - 80
    var y = event.clientY - rect.top - 80


    if (x >= 266) {
        x = 266
    }
    if (x < 0) {
        x = 0
    }
    if (y >= 266) {
        y = 266
    }
    if (y <= 0) {
        y = 0
    }
    shade.style.left = x + 'px'
    shade.style.top = y + 'px'


    // 大盒子的移动距离
    bigImg.style.left = -3 * x + 'px'
    bigImg.style.top = -3 * y + 'px'

    /* 
       第三步：
           遮罩层/左侧的盒子 = 右侧盒子/右侧图片
           100    300         300      900
     */

}


/******************** */
let username = getCookie('username');
if (!username) { // 未登录
    $('.ne').html(`<a href="./jing-denlu.html">你好，请登入</i></a>`)
    $('.na').html(`<a href="./jing-zhuce.html">免费注册</a>`)
} else {
    $(window).ready(function() {
        console.log(getCookie(username))
            // console.log(decodeURIComponent(username)) //解决中文乱码
        $('.ne').html(`欢迎${decodeURIComponent(username)}`)
        $('.ne').css({ 'margin-right': '20px' })
        $('.na').html(`退出登入`)
            // 实现点击退出
            //  删除cookie中的键名为username的值就可以退登录
        $('.na').click(function() {
            delCookie('username');
            delCookie('rememberusername');
            location.reload();
        })
    })
}
/******************************************/
// 获取本地的商品id
let id = sessionStorage.getItem('goodsId');
// 判断商品id是否存在，否则跳转回列表页
if (!id) {
    layer.msg('非法请求', {
        time: 2000
    });
    setTimeout(() => {
        // location.href = './shouye.html';
        window.history.go(-1)
    }, 2000);
}
// 根据商品id发起请求，获取到商品数据
// 添加加载层
let index = layer.load(1, {
    shade: .7
})
getGoodsInfo()
async function getGoodsInfo() {
    let {
        data
    } = await pAjax({
        url: './php/detail.php',
        data: {
            id
        },
        dataType: 'json'
    });
    // console.log(data);
    // 获取商品图片地址
    let imgs = data.img.split('==========');
    // 获取到商品详情数据然后渲染
    $('.fabb>img').attr('src', imgs[0]);
    $('.fdj-2>img').attr('src', imgs[0]);
    // 遍历imgs数组
    let str = '';
    imgs.forEach(item => {
        str += `
     <li><img src='${item}' /></li> 
    `
    });
    $('.fajacc').html(str);
    // 调用封装好的放大镜函数
    $('.text span').text(data.text);
    // $('.souceprice>span').text(data.price);
    $('.jq-1').text('￥ ' + data.price);
    // 将商品的库存写入input标签的自定义属性中 data-stock
    $('.num').attr('data-stock', data.stock);
    layer.close(index); // 关闭加载层
    /******************** */
    $('.fajacc img').click(function() {
        $('.fabb>img').attr('src', $(this).attr('src'));
        $('.fdj-2>img').attr('src', $(this).attr('src'));
    })
}

/******************** */
$(".tc2").click(function() {
    location.href = "./jing-gouwu.html";
    return false
})

/*************** */
/********************************************** */
// 通过cookie获取用户信息，并判断
// 点加入购物车
$('.tc1').click(() => {
    // 判断是否登录
    if (!username) {
        layer.msg('登录后才能加入购物城', {
            time: 1000
        });
        setTimeout(() => {
            window.history.go(-1)
        }, 1000);
    }
    // 获取购物数量
    let num = $('.num').text();
    // 先获取本地存储购物车的数据
    let localData = localStorage.getItem('data');
    // 判断购物车是否为空
    if (!localData) {
        // 购物车为空
        // 直接将此次购买的商品信息写入购物车
        let obj = {
            goodsId: id,
            num: num,
            username: username
        };
        // 存入localStorage
        localStorage.setItem('data', JSON.stringify([obj]));
        layer.msg('加入购物车成功');
    } else {
        let data = JSON.parse(localData);
        // 判断之前该用户知否将这个商品加入过购物城
        let res = data.findIndex(v => v.username == username && v.goodsId == id);
        if (res != -1) { // 如果res不为-1则  这个用户之前就已经将这个商品加入购物车
            // 将这个之前就加入到购物的数据拿出来
            let cart = data.find(v => v.username == username && v.goodsId == id);
            cart.num = parseInt(cart.num) + parseInt(num); // 将需要加入购物城的商品数累加并入data数据中
            localStorage.setItem('data', JSON.stringify(data));
            layer.msg('加入购物车成功')
            console.log(num)
        } else { // 这个用户之前没有将这个商品加入过购物城
            data.push({
                goodsId: id,
                num: num,
                username: username
            });
            localStorage.setItem('data', JSON.stringify(data));
            layer.msg('加入购物车成功')
        }
    }
})

/******************** */
var num = $('.num').text()
$('.num+').click(function() {
    event.stopPropagation()
        // 获取input中的val，和库存值
    let val = $('.num').text() - 0;
    let stock = $('.num')[0].dataset.stock - 0;
    if (val == stock) { // 判断是否超出库存量
        $('.num').text(stock);
        layer.msg('超出库存');
    } else {
        $('.num').text(++num);
    }


})
$('.num-').click(function(e) {
    event.stopPropagation()
    if (num > 1) {
        $('.num').text(--num)
    } else {
        $('.num').text(1)
        layer.msg('购买数最少为1');
    }
    // localStorage.clear()
})